  <!-- <h3>自助数据集配置</h3> -->
<template>
<div class="parents">
  <div class="tableNameBox">
    <select-table @makeTreeData="makeTreeData" ref='refSelectTree'></select-table>
  </div>
  <div v-show='isShowCheckBox' class="checkBox">
        <div style="margin-bottom:10px">
          <p>{{makeType=='add'?"新增":"修改"}}：{{this.$storeSave.state.updateObj.name || this.$storeSave.state.addelevanceObj.name}}</p>
         <el-button size="mini" v-show="isShowAddEleviews" @click="addEleviews">添加合并</el-button>
          <el-button size="mini" @click="goPage" v-show="finalArr.length>0">返回列表</el-button>
          <!--  <h6>可选表</h6>
          <el-checkbox :indeterminate="isIndeterminateTable" v-model="checkTableAll" @change="handleCheckTableAllChange">全选</el-checkbox>
          <div style="margin: 5px 0;"></div>
          <el-checkbox-group v-model="selectTableS" @change="handleCheckedTableChange">
            <el-checkbox style="display:block;" v-for="(tableData,index1) in tableArray" :label="tableData" :key="index1">{{tableData.name}}</el-checkbox>
          </el-checkbox-group> -->
        </div>

       <span>可选字段</span>
      <el-checkbox style='margin-left:4rem' :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
       <hr>
      <div style="margin: 5px 0;"></div>
      <el-checkbox-group v-model="fontArr" @change="handleCheckedCitiesChange">
        <el-checkbox style="display:block;" v-for="(item,index) in rowList" :label="item.setId" :key="index">{{item.COMMENTS}}</el-checkbox>
      </el-checkbox-group>
      <div>
        <br>
        <h6>已选字段</h6>
        <hr>
        <p v-for="(font,index) of finalArr" :key="index">{{font.COMMENTS}}</p>
      </div>
  </div>
  <div class="tableTitleBox">
    <div style="height: calc(100% - 2px)">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <el-menu-item @click="showTable('1')" style="width:20%" index="1">数据预览</el-menu-item>
        <el-menu-item @click="showTable('2')" style="width:20%" index="2">字段详情</el-menu-item>
        <el-menu-item @click="showTable('3')" style="width:20%" index="3">条件筛选</el-menu-item>
        <el-menu-item @click="showTable('4')" style="width:20%" index="4">合并关系</el-menu-item>
        <el-button type="primary" @click='goPage' class="el-icon-back" v-show="finalArr.length>0" size="mini" style="margin-top: 5px">返回</el-button>
      </el-menu>
      <popup  ref='refContent'  v-if="activeIndex=='4' && isShowElePup" :makeType="makeType"  @getconnId='getconnId' @getAssist="getAssist"></popup>
     <!-- 临时数据预览的 -->
  <data-preview  @getData="queryDataLook" v-loading="isShowLoading" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"  element-loading-text="拼命加载中" v-if="activeIndex=='1'" :DataPreview="dataLook">
</data-preview>
  <!-- 字段详情的 -->
  <table-content v-if="activeIndex=='2' && fontDetailList" v-loading="isShowDetailLoading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"  element-loading-text="拼命加载中" :height="height" :fontDetailList="fontDetailList"></table-content>
    <filter-cond  v-if="activeIndex=='3'"></filter-cond>
    </div>
  </div>
</div>
</template>
<script>
import tableContent from './FontNodeDetail.vue' // 字段详情
import selectTable from '@/components/group/selectTable.vue'// 主表可选表
import popup from '@/components/popup/popup'// 编辑关联数据页
import {QUERY_FONT_NODE, QUERYSELECTFONTS, QUERY_TMP_DATA_TABLE, QUERYFONTS} from '@api/url'// 接口定义
import DataPreview from './DataPreview.vue'// 临时数据预览
import FilterCond from '@/views/commonView/FilterCond.vue' // 条件筛选
import addMenuEvents from '@/components/group/addEvent.js' // 新增菜单
  export default {
    data () {
      return {
        checkTableAll: false,
        isShowDetailLoading: false,
        isShowpup: true,
        checkAll: false,
        isShowElePup: true, // 新增自助数据集关联设置新增
        isShowCheckBox: true,
        activeIndex: '1', // 默认展示添加新增
        fontDetailList: [], // 字段详情
        finalArr: [], // 已选字段
        tableData: [], // 字段详情 、数据预览
        dataLook: {
            records: []
          }, // 数据预览
        isShowLoading: false,
        // addelevanceObj:{},//新增表信息
        connId: null, // 连接id
        detailData: [],
        menuData: {},
        SetmenuId: 0, // 设置id
        height: window.innerHeight - 120,
        isIndeterminate: false,
        isIndeterminateTable: false,
        tableArray: [], // 全体表
        selectTableS: [],
        selectTableInd: null,
        rowList: [],
        fontArr: [],
        pageInfo:
        {// 临时查询页码信息
        pageNum: 1,
        pageSize: 15// 默认
        },
        isShowAddEleviews: false
      }
    },
     computed: {
      addelevanceObj () {
        debugger
        return this.$storeSave.state.addelevanceObj
      }
    },
    components: {
      selectTable,
      DataPreview,
      tableContent,
      popup,
      FilterCond
    },
    mounted () {
      debugger
      console.log(this.$storeSave.state.addelevanceObj)
      console.log('this.$storeSave.state.addelevanceObj')
      console.log(this.makeDataObj)
      if (this.$storeSave.state.updateObj.menuId) {
        debugger
        // 点编辑查询
        this.queryAllNode(this.$storeSave.state.updateObj, 'first')
      }
    },
    destoryed () {
        this.$storeSave.state.addelevanceObj = {}
        this.$storeSave.state.newChild = {}
    },
    props: ['makeType', 'makeDataObj'],
    // makeType 修改 新增  查询
    // makeDataObj 选中的原表
    watch: {
      makeType (val) {
        // val: add, update query
        if (val == 'update') {
          this.isShowElePup = true
          debugger
          this.queryAllNode(this.makeDataObj, val)
        }
      }
    },
    methods: {
      closePup () {
        console.log('关闭弹窗')
        this.isShowpup = false
      },
      // 新增已选字段
      addFontdetail (makeType) {
        debugger
        return new Promise((resolve, reject) => {
           let param = {
            'optMode': 'A',
            'modelId': this.$storeSave.state.addelevanceObj.menuId ? this.$storeSave.state.addelevanceObj.menuId : this.$storeSave.state.updateObj.menuId
            }
          if (makeType == 'add') {
            debugger
            param.tdfds = []
            this.finalArr.forEach((data, index) => {
              param.tdfds.unshift({
              'modelId': data.TABLEID,
              'tableId': data.TABLEID,
              'tableName': data.TABLENAME,
              'fldEnname': data.COLUMN_NAME,
              'fldShowname': data.COMMENTS || data.COLUMN_NAME,
              'fldAlias': data.COLUMN_NAME,
              'fldCnname': data.COMMENTS || data.COLUMN_NAME,
              'fldType': data.DATA_TYPE,
              'fldLen': data.DATA_LENGTH,
              'seqno': this.finalArr.length
            })
          })
        } else {
          param.optMode = 'D'
        }
        console.log(this.finalArr)
        console.log('新增或删除字段详情入参数')
        console.log(param)
        this.$http.post(QUERYFONTS, param).then(res => {
        console.log('新增或删除字段详情成功')
        console.log(res)
        resolve(res)
        }).catch(err => {
          console.log('新增或删除字段详情失败')
          console.log(err)
          reject(err)
          })
        })
      },
      // 把选中的放到汇总里----已选字段收集
      async getObj () {
        if (this.fontArr.length < 1) { // 取消全选的时候，把终选数据里id相符的删除
          // let TABLEID=this.rowList[0].TABLEID
          // let newArr=[]
          if (this.finalArr.length < 1) { // 当已选字段为空的时候，调删除接口
            this.addFontdetail('delete')// 字段详情删除
          }
        } else {
          this.fontArr.forEach((ele, index) => {
            let selectObj = this.rowList.find(item => {
              if (item.setId == ele) {
                let isSam = this.finalArr.find(obj => {
                  if (obj.setId == ele) {
                    return obj
                  }
                })
                if (!isSam) { // 终选字段不存在时，就添加进去
                  this.finalArr.unshift(item)
                }
                return item
              }
            })
          })
          if (this.finalArr.length > 0) { // 已选字段不为空时
          debugger
          if (!this.$storeSave.state.addelevanceObj.menuId && this.$storeSave.state.newChild.menuId) {
              // 新建任务和新建菜单
              await addMenuEvents.addEvent(this)
             let a = await addMenuEvents.createdTable(this)
              if (a.code === '成功') {
                  this.isShowAddEleviews = true
              }
              await this.addFontdetail('add')// 新增字段详情
            } else {
              this.addFontdetail('add')
            }
            } else { // 已选字段为空时
              this.addFontdetail('delete')// 字段详情删除
          }
        }
        if (this.activeIndex == '1') { // 展示数据预览时
          this.queryDataLook()// 查询临时数据
        } else if (this.activeIndex == '2') { // 展示字段详情时
          this.queryFont()// 查询已选字段--字段详情
        }
      },
      queryDataLook (pageInfo) {
        if (pageInfo) {
          this.pageInfo = pageInfo
        }
        // 改变页码时才有pageInfo  {pageNum:this.pageNum,pageSize:this.pageSize}
        console.log(this.$storeSave.state.updateObj)
        console.log('this.$storeSave.state.updateObjconsole.log(this.$storeSave.state.updateObj)console.log(this.$storeSave.state.updateObj)console.log(this.$storeSave.state.updateObj)')
        let param = {
          'connId': this.connId || this.$storeSave.state.updateObj.connId || this.$storeSave.state.mainTableData.connId,
          'pageNo': this.pageInfo.pageNum,
          'pageSize': this.pageInfo.pageSize,
          'tableLists': []}
        this.finalArr.forEach((ele, index) => {
          if (index == 0) {
            // 最开始直接赋值
            param.tableLists[0] = {
              'tableName': ele.TABLENAME,
              'tableID': ele.TABLEID,
              'seqNo': 1,
              'joinType': '',
              'fldLists': [
                  {
                    'fldName': ele.COLUMN_NAME,
                    'seqNo': index + 1
                }
              ]
            }
          } else {
            // 已选选字不是第一个时，先循环，和第一条记录比较，如果
            param.tableLists.forEach((element, ind) => {
              // 循环有几张表的数据
              if (element.tableID == ele.TABLEID) { // 如果来源表id一致，就添加到该数组下面
                param.tableLists[ind].fldLists.push({
                  'fldName': ele.COLUMN_NAME,
                  'seqNo': param.tableLists[ind].fldLists.length + 1
                })
              } else if (ind == param.tableLists.length - 1) { // 循环到最后一条还是没有重复的表id，就增加一个新的对象就去
                param.tableLists.push({
                  'tableName': ele.TABLENAME,
                  'tableID': ele.TABLEID,
                  'seqNo': 1,
                  'joinType': '',
                  'fldLists': [
                      {
                        'fldName': ele.COLUMN_NAME,
                        'seqNo': 1
                    }
                  ]
                })
              }
            })
          }
        })
        console.log('临时数据预览查询入参')
        console.log(param)
        if (param.tableLists.length > 0) {
          this.isShowLoading = true
          // 查询临时数据
          this.$http.post(QUERY_TMP_DATA_TABLE, param).then(res => {
            this.isShowLoading = false
            if (res.data.code == '200') {
              this.dataLook = res.data.data
            } else {
              this.$alert(res.data.message, '提示', {
                confirmButtonText: '确定',
                callback: action => {

                }
              })
            }
            console.log(res)
          }).catch(err => {
            this.isShowLoading = false // 停止loading
            console.log(err)
          })
        } else {
          // 无选择数据时，置空
          this.dataLook = {
            records: []
          }
        }
      },
      // 确定选字段
      doitSelect () {
        // this.fontArr  当前选择字段
        // this.finalArr选择字段汇总
        let exitTableId = this.rowList[0].TABLEID
        console.log(this.rowList)
         if (this.fontArr.length > 1) { // 选了字段的情形
           if (this.finalArr.length < 1) {
             console.log('this.finalArr.length<1')
           } else {
             // 汇总数据有字段
             if (this.finalArr.length > 0) { // 有已选字段
               let newArr = []
               let selectTableId = []// 初始化一个新数组存放已选的表id
               this.finalArr.forEach((element) => {
                  if (element.TABLEID != exitTableId) {
                    newArr.push(element)
                  }
                  let have = selectTableId.indexOf(element.TABLEID)
                  if (have == -1) {
                    selectTableId.push(element.TABLEID)
                  }
                })
                console.log('已经选中的表有哪些')
                console.log(selectTableId)
                this.$storeSave.state.activeTable = selectTableId // 组成自助数据集的表id
                this.finalArr = newArr // 已选字段赋值
             }
          }
          this.getObj(this.rowList, this.fontArr, this.finalArr)
         } else { // 没选字段点保存或者取消选择的情形
         let newArr = []
            this.finalArr.forEach((element, index) => {
              if (element.TABLEID != exitTableId) {
                newArr.push(element)
              }
            })
            this.finalArr = newArr
            if (this.activeIndex == '1') { // 展示1的时候调用数据临时查询
              this.queryDataLook()
            } else if (this.activeIndex == '2') { // 展示字段详情时，调字段详情页面
              this.queryFont()// 查询已选字段--字段详情
            }
            this.getObj(this.rowList, this.fontArr, this.finalArr)
         }
         console.log('添加后的this.fontArr')
         console.log(this.fontArr)
      },
      addEleviews () {
        console.log(this.activeIndex)
        this.showType = 4
        this.activeIndex = this.showType
        this.isShowElePup = true
          // 使组件内部变量显示dom
        setTimeout(() => {
            this.$refs.refContent.showPup()
        }, 1000)
      },
      getconnId (connId) {
        this.connId = connId
      },
      getAssist (table) {
        console.log('收到数据集合辅表')
        console.log(table)
        console.log(this.makeDataObj)
        // 显示关联关于
        this.$refs.refSelectTree.getParentData(table)
        // this.menuData.forEach(ele=>{
        //   if (ele.menuId==table.menuId) {
        //     debugger
        //     console.log('11111111111')
        //   }
        // })

        // if (this.tableArray.length<1) {
        //   this.tableArray.push(table)
        // }else{
        //   this.tableArray.forEach(ele=>{
        //     console.log('-------------------')
        //     console.log(ele)
        //     if (ele.menuId !=table.menuId) {
        //       this.tableArray.push(table)
        //     }
        //  })
        // }
      },
      //  handleCheckTableAllChange(val) {
      //   this.selectTableS= val ? this.tableArray : [];
      //   this.isIndeterminateTable = false; //
      //   console.log('全选')
      //   console.log(val)

      // },
      // handleCheckedTableChange(value) {
      //   let checkedCount = this.selectTableS.length;
      //   this.checkTableAll = checkedCount === this.tableArray.length;
      //   this.isIndeterminateTable = checkedCount > 0 && checkedCount < this.tableArray.length;
      //   this.this.isIndeterminateTable=!this.this.isIndeterminateTable
      //    debugger
      // },
      add () {
        this.$http.post()
        console.log('保存数据')
      },
      /// /全字段查询
      makeTreeData (data) {
        console.log(data)
        console.log('选择的数据提供给自助数据集合data')
        this.menuData = data
        this.queryAllNode(data)
        console.log('选择的数据提供给自助数据集合1')
      },
      goPage () {
        // selectMenuData:{}, //选择了操作的元数据表主表---用于数据准备
        // addelevanceObj:{},//数据准备新增目录时候的id
        // updateObj:{}//自助数据集 数据准备需要编辑的对象
        this.$storeSave.state.addelevanceObj = {}
        this.$storeSave.state.updateObj = {}
        this.$emit('showSelfData')
      },
      queryAllNode (data, first) {
        this.checkAll = false
        debugger
        console.log(data)
        // 全字段查询
         this.$http.post(QUERY_FONT_NODE, {
          optMode: 'C', // A :add  B:update　Ｃ：查询
          modelId: data.menuId, // 表id
          connId: null, // 连接ld
          idType: '1'// 1数据集,2来源表,3 SQL

        }).then(res => {
          this.SetmenuId = 1
          console.log('dataGather查询全字段成功')
          console.log(res)
          this.rowList = []
          this.fontArr = []
          if (res.data.code == '200' && res.data.data.length > 0) {
          let setId = ''
          res.data.data.forEach((font, index) => {
            setId = `${font.COLUMN_NAME}${font.TABLEID}`
            font.setId = setId
          })
          this.rowList = res.data.data
          if (this.makeType == 'update' && first == 'first') { // 修改原数据集
            this.finalArr = res.data.data // 点击自助数据集查询到的全字段，赋值为已选字段
            this.fontArr = []
            let tableId = []// 赋值装已选id的容器
            tableId[0] = this.rowList[0].TABLEID
            this.rowList.forEach(ele => {
              if (tableId.indexOf(ele.TABLEID) == -1) {
                tableId.push(ele.TABLEID)
              }
            })
            //  //查询后，让已经选好的字段返显
            this.finalArr.forEach(ele => {
              tableId.forEach(item => {
                if (ele.TABLEID == item) { // 表id相同的，都反显打钩
                  this.fontArr.push(ele.setId)
                }
              })
            })
            this.doitSelect()
            if (this.fontArr.length == this.rowList.length) {
              this.checkAll = true
            }
          } else if (first == 'add') {
            console.log('first=="add"')
            this.fontArr = []
            let tableId = []// 赋值装已选id的容器
            tableId[0] = this.rowList[0].TABLEID
            this.rowList.forEach(ele => {
              if (tableId.indexOf(ele.TABLEID) == -1) {
                tableId.push(ele.TABLEID)
              }
            })
            console.log('已选表id')
            console.log(tableId)
             // 查询后，让已经选好的字段返显
            this.finalArr.forEach(ele => {
              tableId.forEach(item => {
                if (ele.TABLEID == item) { // 表id相同的，都反显打钩
                  this.fontArr.push(ele.setId)
                }
              })
            })
          } else {
            this.fontArr = []
            let tableId = []// 赋值装已选id的容器
            tableId[0] = this.rowList[0].TABLEID
            this.rowList.forEach(ele => {
              if (tableId.indexOf(ele.TABLEID) == -1) {
                tableId.push(ele.TABLEID)
              }
            })
             // 查询后，让已经选好的字段返显
            this.finalArr.forEach(ele => {
              tableId.forEach(item => {
                if (ele.TABLEID == item) { // 表id相同的，都反显打钩
                  this.fontArr.push(ele.setId)
                }
              })
            })
            console.log('else tableIdtableIdtableIdtableId')
            console.log(tableId)
          }
            if (this.rowList.length > 0 && this.fontArr > 0) {
              this.isIndeterminate = true
            }
          } else {
            // 查询失败
            this.fontArr = []
            this.rowList = []
          }
        }).catch(err => {
          this.fontArr = []
          this.rowList = []
          console.log('查询全字段失败')
          console.log(err)
        })
      },
      // 全选
      handleCheckAllChange (val) {
        this.fontArr = []
        console.log(val)
        if (val) {
          this.rowList.forEach(ele => {
            this.fontArr.unshift(ele.setId)
            this.doitSelect()
          })
        } else {
          this.fontArr = []
          this.doitSelect()
        }

        this.isIndeterminate = false
        this.makeData(this.fontArr)// 操作选择字段
      },
      showTable (showType) {
        console.log('0000000000000000000')
        console.log(showType)
        // 1---数据预览
        // 2---字段详情
        // 3---条件晒选
        this.activeIndex = showType
        this.showType = showType
        if (this.showType == '2') {
          this.queryFont()
        } else if (this.showType == '1') {
          this.queryDataLook()
           // 去查询数据预览界面接口
           console.log('点击了数据预览')
        } else if (showType == '4') { // 添加关联关系，选字段的复选框区域影藏
          // this.isShowCheckBox=true
          this.isShowElePup = true
        }
        console.log(this.showType)
      },
      queryFont () {
        console.log(this.$storeSave.state.addelevanceObj)
        console.log(this.$storeSave.state.updateObj)
        console.log('---------------字段详情源数据')
        this.isShowDetailLoading = true
        this.$http.post(QUERYSELECTFONTS, {
          optMode: '1',
          'id_type': '1',
          modelId: this.$storeSave.state.addelevanceObj.menuId ? this.$storeSave.state.addelevanceObj.menuId : this.$storeSave.state.updateObj.menuId
          }).then(res => {
            this.isShowDetailLoading = false
            // 查询字段成功回调
            console.log('查询字段详情成功回调')
            console.log(res.data)
            if (res.data.code == '200') {
              this.fontDetailList = res.data.data
            }
          })
      },
      handleCheckedCitiesChange (selectArray) {
        console.log(selectArray)
        debugger
        // 终选数据为空的时候，循环调用
        console.log(this.finalArr)
        console.log('this.finalArr-------------------------')
        let checkedCount = this.fontArr.length// 选中长度
        this.checkAll = checkedCount === this.rowList.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.rowList.length
        this.doitSelect()
        this.makeData(selectArray)// 操作选择字段
        console.log(this.fontArr)
      },
      makeData (selectArray) {
        if (selectArray.length < 1) {
          console.log('选择数据为空的时候')
          // this.detailData=[]
          this.showTable(this.showType)
          return
        }
        // selectArray.forEach((element,key) => {
        //   // let obj={
        //   //   fldType:element.fldType,
        //   //   fldShowname:element.fldShowname,
        //   //   tableName:element.TABLENAME
        //   // }
        //   // this.detailData.push(obj)
        //   // console.log(this.detailData)
        // });
        // 在选择过字段选择的时候，实时更新字段信息
        if (this.showType == '2') {
            console.log('去调用showType')
            this.showTable(this.showType)
          }
      }
    }
  }
</script>
<style lang="less" scoped>
.parents{
    width:100%;
    height: 95%;
    display: flex;
    text-align: center;
    border: 1px solid #ccc;
  .tableNameBox{
    width: 20%;
    height: calc(100% - 1px);
    background: #fff;
    border-right:1px solid #ccc;
    padding: 10px;
  }
  .checkBox{
    width: 20%;
    background: #fff;
    text-align: left;
    overflow: auto;
    height: calc(100% - 1px);
    padding: 10px;
    border-right:1px solid #ccc ;
  }
  .tableTitleBox{
    width:60%;
    margin-left:2px ;
    height: calc(100% - 1px);
  }
  .activeStyle{
    color: #17a2b8;
  }
}

</style>
